<style lang="less">
@import '../common/less/varible.less';

.sort {
  width: 100%;
  padding: 15px 15px;

  .title {

    h3 {
      padding: 10px 10px;
    }

    ul {
      width: 100%;
      // margin: 10px 20px;
      display: flex;
      // 设置元素换行
      flex-wrap: wrap;
      padding: 10px 20px;
      justify-content:space-around;
      li {
        // width: 100%;
        margin: 10px 10px;
        a {
          display: inline-block;
          margin-top: 10px;

          .intro {
            display: inline-block;
            padding: 10px 20px;
            font-size: 18px;
            color: @activeColor;
            background-color: skyblue;
            text-align: center;
            border-radius: 15px;
          }

        }
      }
    }
  }

  .lady {
    border-bottom: 3px solid gray;

  }
}
</style>

<template>
  <div class="sort">
    <!-- <h3>分类</h3> 
           v-for="(item) in arr" 
           v-for="item in arr" :key="item.id" 
           :to="{path: '/detail', query:{id: item.id}}"  -->
  
    <div class="title">
      <h3>男生小说</h3>
      <ul>
        <li v-for="item in arr " :key="item.id">
          <router-link :to="{path: '/detail', query:{id: item.id}}">
            <div class="intro">
              {{ item.cateName }}
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  
    <div class="title">
      <h3>女生小说</h3>
      <ul>
        <li v-for="item in arrl" :key="item.id">
          <router-link :to="{path: '/detail', query:{id: item.id}}">
            <div class="intro">
              {{ item.cateName }}
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="title">
      <h3>图书书库</h3>
      <ul>
        <li v-for="item in arrs" :key="item.id">
          <router-link :to="{path: '/detail', query:{id: item.id}}">
            <div class="intro">
              {{ item.cateName }}
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import { Sortdatas } from '../api/index'

export default {
  data() {
    return {
      arr: [],
      arrl:[],
      arrs:[],
    }
  },
  methods: {
    async getEditSort() {

      await Sortdatas({ limit: 3 })
        // .then(
        //   content => {
        //     console.log("--->:", content);
        //       // let [{ list }] = content;
        //       // console.log({list})
        //       let newArr = content.map((item) => {
        //         // let obj = {};
        //         // obj.cateId = item.cateId;
        //         // obj.cateName = item.cateName;
        //         // obj.index = index;
        //         // return obj;
        //         return item;
        //       })
        //       this.arr = newArr;
        //       console.log(this.arr)
        //   }
        // )
        .then(
          content => {
            console.log("--->:", content);
            // console.log("--->:", content[0]);
            // console.log("--->:", content[1]);
            // console.log("--->:", content[2]);

            // 男生
            let newArr = content[0].cates.map((item,index) => {
              let obj = {};
              obj.cateId = item.cateId;
              obj.cateName = item.cateName;
              obj.index = index;
              return obj;
            })
            this.arr = newArr;
            // console.log(newArr)
            // 女生
            let newArrl = content[1].cates.map((item,index) => {
              let obj = {};
              obj.cateId = item.cateId;
              obj.cateName = item.cateName;
              obj.index = index;
              return obj;
            })
            this.arrl = newArrl;
            // console.log(newArrl)
            // 图书
            let newArrs = content[2].cates.map((item,index) => {
              let obj = {};
              obj.cateId = item.cateId;
              obj.cateName = item.cateName;
              obj.index = index;
              return obj;
            })
            this.arrs = newArrs;
            // console.log(newArrs)
          }
        )
        .catch(
          err => {
            console.log("请求失败", err)
          }
        )
    }
  },
  created() {
    this.getEditSort();
  }



};
</script>